
<template>
  <el-dialog v-model="isShowDialog"
             :before-close="handleClose"
             title="关联ERP店铺SKU"
             draggable
             width="1000px"
             append-to-body
  >
    <vxe-table
        ref="tableRef"
        border
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        height="445px"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="seq" width="80" title="序号"  ></vxe-column>
      <vxe-column field="erpShopId" title="店铺ID"></vxe-column>
      <vxe-column field="erpSkuId" title="sku编码"></vxe-column>
      <vxe-column field="erpSkuName" title="商品名称"></vxe-column>
      <vxe-column field="link" width="200" title="渠道">
        <template #default="{row}">
          <template v-for="(item,index) in row.links" :key="index">
            <div>
              <el-link type="primary" :href="item" target="_blank">渠道{{index+1}}</el-link>
            </div>
          </template>
        </template>
      </vxe-column>
    </vxe-table>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">关闭</el-button>
        </span>
    </template>

  </el-dialog>
</template>

<script setup>

import {onMounted} from "vue";

const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false
  },
  skuDetails:{type:Array}
})

let tableList=ref([])

const emits = defineEmits(['cancel'])
function handleClose() {
  emits('cancel')
}
onMounted(()=>{
  if(props.skuDetails.length>0){
    tableList.value = props.skuDetails
  }
})
</script>


<style scoped lang="scss">

</style>